<template>
	<view class="content">
		<view class="swiper-box">
			<scroll-view
				class="list-scroll-content" 
				scroll-y
				@scrolltolower="loadData"
			>
				<view class="eva-section">
					<view class="e-header">
						<text class="tit">评价</text>
						<text>({{commentTotal}})</text>
						<text class="tip">好评率 100%</text>
						<text class="yticon icon-you"></text>
					</view> 
					<view class="eva-box" v-for="(item,index) in commentList" v-bind:key="index">
						<image class="portrait" :src="item.headImage||'http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg'" mode="aspectFill"></image>
						<view class="right">
							<text class="name">{{item.userName}}</text>
							<text class="con">{{item.content}}</text>
							<view class="bot">
								<text class="attr">{{item.skuName}}</text>
								<text class="time">{{item.createDate}}</text>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				commentList:[],
				commentTotal:0,
				goodsId:"",
				page:1,
				loadingType: 'more',
			}
		},
		onLoad(option){
			this.goodsId = option.goodsId;
			this.loadData()
		},
		methods: {
			loadData:function(){
				console.log("loadData")
				if(this.loadingType === 'loading'){
					//防止重复加载
					return;
				}
				if(this.loadingType === 'noMore'){
					return;
				}
				this.loadingType = 'loading';
				var that = this;
				that.$api.req({
					goodsId:this.goodsId,
					page:this.page,
					rows:6,
					userId:this.userInfo.id
				},"/comment/list").then((res)=>{
					var d = res.data.data;
					that.commentTotal = d.total;
					d.rows.forEach(item=>{
						item = Object.assign(item);
						that.commentList.push(item);
					})
					that.page++;
					if(that.commentList.length>= that.commentTotal){
						//判断是否还有数据， 有改为 more， 没有改为noMore
						that.loadingType = 'noMore';
					}else{
						//判断是否还有数据， 有改为 more， 没有改为noMore
						that.loadingType = 'more';
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	page, .content{
		background: #ffffff;
		height: 100%;
	}
	.swiper-box{
		height: calc(100% - 10px);
	}
	.list-scroll-content{
		height: 100%;
	}
	/* 评价 */
	.eva-section{
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;
		.e-header{
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			.tit{
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}
			.tip{
				flex: 1;
				text-align: right;
			}
			.icon-you{
				margin-left: 10upx;
			}
		}
	}
	.eva-box{
		display: flex;
		padding: 20upx 0;
		.portrait{
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;
			.con{
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}
			.bot{
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color:$font-color-light;
			}
		}
	}
</style>
